/**
 * 简易H5浮窗控制台，方便测试时调整参数
 */

export class Dashboard {
    static InsCol = {};
    title = "";
    ele: HTMLElement = null;
    constructor(title: string) {
        Dashboard.InsCol[title] = this;

        this.title = title;
        this.ele = document.createElement("div");
        document.body.appendChild(this.ele);
        this.ele.style.display = "none";
        this.ele.style.position = "fixed";
        this.ele.style.flexDirection = "column";
        this.ele.style.left = "0";
        this.ele.style.top = "0";
        this.ele.style.color = "white";
        this.ele.style.background = DEFAULT_BG_COLOR;
        this._domStack[0] = this.ele;

        this.attrBtn(this.title, "x", function () {
            this.hide();
        }.bind(this));
    }
    //一行 文字+文字input
    attrBool(text: string, srcVal: boolean, onEdit) {
        this.row();
        this.text(text);
        let ele = this.inputBool(srcVal, function (val) {
            onEdit(val);
        }.bind(this));
        this.end();

        return new ValueToEle(ele);
    }
    //一行 文字+文字input
    attrText(text: string, srcVal: string, onEdit) {
        this.row();
        this.text(text);
        let ele = this.input(srcVal, function (val) {
            onEdit(val);
        }.bind(this));
        this.end();
        return new ValueToEle(ele);
    }
    //一行 文字+数字input
    attrNum(text: string, srcVal, onEdit) {
        this.row();
        this.text(text);
        let ele = this.inputNum(srcVal, function (val) {
            onEdit(val);
        }.bind(this));
        this.end();
        return new ValueToEle(ele);
    }
    //一行 文字+滚动条
    attrNumRange(text: string, srcVal, max, min, step, onEdit) {
        this.row();
        this.text(text);
        let ele = this.inputRange(srcVal, max, min, step, function (val) {
            lbVal.innerText = `${val}`;
            onEdit(val);
        }.bind(this));
        let lbVal = this.text(`${srcVal}`);
        this.end();
        return new ValueToEle(ele, lbVal);
    }
    //一行 文字+按钮
    attrBtn(text: string, btnText: string, onClick) {
        this.row();
        let ele = this.text(text);
        this.btn(btnText, onClick);
        this.end();
        return new ValueToEle(ele);
    }

    //插入一个空行
    row(color: string = DEFAULT_BG_COLOR) {
        let row = _cRow();
        row.style.background = color;
        this.curDom.appendChild(row);
        this.unshiftDom(row);
        return row;
    }
    //插入一个空列
    col(color: string = DEFAULT_BG_COLOR) {
        let col = _cCol();
        col.style.background = color;
        this.curDom.appendChild(col);
        this.unshiftDom(col);
        return col;
    }
    //跳出一层dom,  
    end() {
        this.shiftDom();
    }

    //插入字
    text(text) {
        let ele = _cDiv(text);
        this.curDom.appendChild(ele);
        return ele;
    }
    //插入按钮
    btn(text, onClick) {
        let btn = _cBtn(text, onClick);
        this.curDom.appendChild(btn);
        return btn;
    }
    //插入Input
    input(srcVal, onEdit) {
        let input = _cInput(srcVal, onEdit);
        this.curDom.appendChild(input);
        return input;
    }
    //插入Input
    inputNum(srcVal, onEdit) {
        let input = _cInput(srcVal, onEdit);
        input.type = "number";
        this.curDom.appendChild(input);
        return input;
    }
    inputRange(srcVal, max, min, step, onEdit) {
        let input = _cInput(srcVal, onEdit);
        input.type = "range";
        input.min = min;
        input.max = max;
        input.step = step;
        this.curDom.appendChild(input);
        return input;
    }
    inputBool(srcVal: boolean, onEdit) {
        let input = _cInput(srcVal, onEdit);
        input.type = "checkbox";
        input.checked = srcVal;
        this.curDom.appendChild(input);
        return input;
    }

    dispose() {
        this.onDispose && this.onDispose();
        if (this.loopId) {
            clearInterval(this.loopId);
        }
        if (this.ele) {
            this.ele.remove();
            this.ele = null;
        }
        if (Dashboard.InsCol[this.title]) {
            delete Dashboard.InsCol[this.title]
        }
    }
    onDispose: () => void = null;

    get isShowed() {
        return this.ele.style.display != "none";
    }
    show() {
        this.ele.style.display = "flex";
    }
    hide() {
        this.ele.style.display = "none";
    }
    toggle() {
        this.ele.style.display = this.ele.style.display == "none" ? "flex" : "none";
    }

    protected _domStack: HTMLElement[] = [];
    get curDom() {
        return this._domStack[0];
    }
    unshiftDom(dom: HTMLElement) {
        this._domStack.unshift(dom);
    }
    shiftDom() {
        if (this._domStack.length > 1) {
            return this._domStack.shift();
        }
        return null;
    }

    protected loopId = 0;
    loop(cb) {
        let time = Date.now();
        //@ts-ignore
        this.loopId = setInterval(() => {
            let newTime = Date.now();
            let dt = time - newTime;
            time = newTime;
            cb(dt);
        }, 20);
    }
};
window["Dashboard"] = Dashboard;


export class ValueToEle {
    constructor(...eles: HTMLElement[]) {
        this.__eles = eles;
    }
    addEle(ele: HTMLElement) {
        this.__eles.push(ele);
    }
    get value() {
        return this.__value;
    }
    set value(val) {
        this.__value = val;
        this.__eles.forEach(ele => {
            switch (ele.tagName.toLowerCase()) {
                case "div":
                case "span":
                case "b":
                case "button":
                    ele.innerText = `${val}`;
                    break;
                case "progress":
                case "input":
                    (<HTMLInputElement>ele).value = val;
                    break;
                case "select":
                    (<HTMLSelectElement>ele).selectedIndex = val;
                    break;
                default:
                    console.warn(`${ele.tagName}没有识别`);
                    ele["value"] = val;
                    ele["innerText"] = val;
                    break;
            }
        });
    }
    private __eles: HTMLElement[] = [];
    private __value: any;
};
export type VTE = ValueToEle;

const _cBtn = (text, onClick) => {
    let btn = document.createElement("button");
    if (text) {
        btn.innerText = text;
    }
    btn.onclick = onClick;
    return btn;
}
const _cDiv = (text = "") => {
    let div = document.createElement("div");
    if (text) {
        div.innerText = text;
    }
    return div;
}
const _cCol = () => {
    let div = _cDiv();
    div.style.display = "flex";
    div.style.flexDirection = "column";
    return div;
}
const _cRow = () => {
    let div = _cDiv();
    div.style.display = "flex";
    div.style.flexDirection = "row";
    return div;
}
const _cInput = (srcVal, onEdit) => {
    let input = document.createElement("input");
    input.oninput = () => {
        onEdit(input.value)
    };
    input.value = srcVal;
    return input;
}
window["dashboard"] = Dashboard;
const DEFAULT_BG_COLOR = `rgba(50,50,50,0.3)`;